<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin:0;padding:0;}
       body{text-align: center}
    </style>
</head>
<body>
    <svg width="1000" height="273" style="background: #ccc;">
        <defs>
            <pattern id="pic1" width="100%" height="100%">
                <image xlink:href="img/1.jpg"></image>
            </pattern>
            <pattern id="pic2" width="100%" height="100%">
                <image    xlink:href="img/2.jpg"></image>
            </pattern>
            <pattern id="pic3" width="100%" height="100%">
                <image   xlink:href="img/3.jpg"></image>
            </pattern>
            <pattern id="pic4" width="100%" height="100%">
                <image   xlink:href="img/1.jpg"></image>
            </pattern>
            <pattern id="pic5" width="100%" height="100%">
                <image   xlink:href="img/2.jpg"></image>
            </pattern>
            <pattern id="pic6" width="100%" height="100%">
                <image   xlink:href="img/3.jpg"></image>
            </pattern>
            <pattern id="pic7" width="100%" height="100%">
                <image   xlink:href="img/4.jpg"></image>
            </pattern>
            <pattern id="pic8" width="100%" height="100%">
                <image   xlink:href="img/5.jpg"></image>
            </pattern>
            <pattern id="pic9" width="100%" height="100%">
                <image   xlink:href="img/6.jpg"></image>
            </pattern>
            <pattern id="pic10" width="100%" height="100%">
                <image   xlink:href="img/7.jpg"></image>
            </pattern>
        </defs>
        <polygon id="box1" points="0,0 169,0  0,143" fill="url(#pic1)"></polygon>
        <polygon id="box2" points="198,0 431,0  295,115" fill="url(#pic2)"></polygon>
        <polygon id="box3" points="473,0 542,0  616,89 414,259 313,138" fill="url(#pic3)"></polygon>
        <polygon id="box4" points="597,0 712,0  644,59" fill="url(#pic4)"></polygon>
        <polygon id="box5" points="855,0 988,0  911,68" fill="url(#pic5)"></polygon>
        <polygon id="box6" points="0,185 5,181  84,273 0,273" fill="url(#pic6)"></polygon>
        <polygon id="box7"  points="33,158 190,30  391,273 127,273" fill="url(#pic7)"></polygon>
        <polygon id="box8" points="581,158 678,273  445,273" fill="url(#pic8)"></polygon>
        <polygon id="box9" points="756,0 819,0  895,89 693,263 591,143" fill="url(#pic9)"></polygon>
        <polygon id="box10" points="1000,36 1000,273  719,273" fill="url(#pic10)"></polygon>
    </svg>
</body>
<script>
    box1.onmouseover=function () {
        console.log(1)
    }
</script>
</html>